<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在运动中延长动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 160px;
            height: 40px;
            border-radius: 40px;
            display: block;
            overflow: hidden;
        }
        span {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #4df5c4;
            display: inline-block;
            position: absolute; 
            transform: translateX(0px);
        }

        @keyframes circle0 {
          /* 表示totalTime * 0% */
          0% {
            transform: translateX(0);
          }
          0% {
            transform: translateX(0);
          }
          /* 表示totalTime * 30% = 1s * 30% = 0.3s */
          30% {
            transform: translateX(60px);
          }
          100% {
            transform: translateX(60px);
          }
        }
        span:nth-child(1) {
          animation: circle3 1s infinite;
          left: -60px;
        }

        @keyframes circle1 {
          0% {
            transform: translateX(0);
          }
          20% {
            transform: translateX(0);
          }
          50% {
            transform: translateX(60px);
          }
          100% {
            transform: translateX(60px);
          }
        }
        span:nth-child(2) {
          animation: circle2 1s infinite;
          left: 0px;
        }

        @keyframes circle2 {
          0% {
            transform: translateX(0);
          }
          40% {
            transform: translateX(0);
          }
          70% {
            transform: translateX(60px);
          }
          100% {
            transform: translateX(60px);
          }
        }
        span:nth-child(3) {
          animation: circle1 1s infinite;
          left: 60px;
        }

        @keyframes circle3 {
          0% {
            transform: translateX(0);
          }
          60% {
            transform: translateX(0);
          }
          90% {
            transform: translateX(60px);
          }
          100% {
            transform: translateX(60px);
          }
        }
        span:nth-child(4) {
          animation: circle0 1s infinite;
          left: 120px;
          /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }
    </style>
</head>
<body>
  <!-- https://css-tricks.com/repeatable-staggered-animation-three-ways-sass-gsap-web-animations-api/ -->
    <div id="container">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <script>
      let i = 0;
      // 总运动时间
      let totalTime = 1;
      // 运动时间
      let aniTime = 0.3;
      // 交错时间(延迟时间)
      let taggerTime = 0.15;
      /**
       * 假设运动从左->右
       * 那么，dom结构的第一个span元素，就是索引值最大的元素，因为他是最好一个运动的元素
       * 上述，最大的索引值是3
       * maxIndex * taggerTime + aniTime !> totalTime
       * 假设，taggerTime = .3
       * 3 * 0.3 + 0.3 = 1.2，此时，违反>totalTime的原则
       * (3 * 0.3) / totalTime => 0.9/1 => 占总的运动时间的90% => [0%，90%] 是暂停状态
       * [90%, 120%] 是运动状态， 可是keyfamer 最大是100%， => [90%, 100%]说明，少了.2s的运动时间
       * 此时，变会出现动画重叠
       * */
      const iterationTaggerAni = (els, options = { totalTime: 1, aniTime: 0.3, taggerTime: 0.2 }) => {
        [...els].forEach((el, i) => {
          // 创建4个关键帧
          const frames = [
            { transform: `translateX(0)`, offset: 0 },
            { transform: `translateX(0)`, offset: (i * taggerTime) / totalTime },
            { transform: `translateX(60px)`, offset: (i * taggerTime + aniTime) / totalTime },
            { transform: `translateX(60px)`, offset: 100 },
          ]
          el.animate(frames, {
            fill: 'none', // 运动结束后，恢复默认状态
            iterations: Infinity, // 不断重复
            duration: 1000 // 1s
          });
        })
      }
    </script>
</body>
</html>